<template>
	<view class="address-container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="header-title">收货地址管理</text>
		</view>

		<!-- 地址列表展示区域 -->
		<view class="address-list">
			<view v-if="addressList.length > 0">
				<view v-for="(address, index) in addressList" :key="address.addressId" class="address-item">
					<!-- 地址信息 -->
					<view class="address-info">
						<text class="name-phone">{{ address.username }} {{ address.userphone }}</text>
						<text class="address-text">{{ address.provinceCityDistrict }}{{ address.fullAddress }}</text>
					</view>

					<!-- 编辑、删除和默认地址开关 -->
					<view class="action-buttons">
						<u-switch :value="Number(address.defaultAddress) === 0" @change="toggleDefaultAddress(index)"
							activeColor="#f9ae3d" inactiveColor="rgb(230, 230, 230)">
						</u-switch>
						<button class="edit-button" @click="editAddress(index)">编辑</button>
						<button class="delete-button" @click="deleteAddress(index)">删除</button>
					</view>
				</view>
			</view>
			<view v-else class="empty-state">
				<text class="empty-text">暂无收货地址，请点击下方按钮新增。</text>
			</view>
		</view>

		<!-- 新增地址按钮 -->
		<view class="add-address">
			<button class="add-button" @click="addAddress">新增地址</button>
		</view>
	</view>
</template>


<script>
	import {
		getTAddress,
		deleteAddress,
		updateAddress
	} from '@/api/address.js';

	export default {
		data() {
			return {
				addressList: [] // 地址列表
			};
		},
		methods: {
			// 获取地址列表
			getTAddresslist() {
				getTAddress({
					userId: this.$cookies.get("id")
				}).then(res => {
					if (res.message === "success") {
						this.addressList = res.data;
					} else {
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '获取失败'
						});
					}
				});
			},
			// 跳转到新增地址页面
			addAddress() {
				uni.navigateTo({
					url: '/pages/profile/addAddress'
				});
			},
			// 跳转到编辑地址页面
			editAddress(index) {
				uni.navigateTo({
					url: `/pages/profile/editAddress?index=${index}&address=${JSON.stringify(this.addressList[index])}`
				});
			},
			// 删除地址
			deleteAddress(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除该地址吗？',
					success: (res) => {
						if (res.confirm) {
							const addressId = this.addressList[index].addressId;
							const userId = parseInt(this.$cookies.get("id"));
							deleteAddress({
								userId: userId,
								addressId: addressId
							}).then(() => {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
								this.getTAddresslist(); // 删除后刷新列表
							}).catch(() => {
								uni.showToast({
									title: '删除失败，请稍后重试',
									icon: 'none'
								});
							});
						}
					}
				});
			},
			toggleDefaultAddress(index) {
				const address = this.addressList[index];
				const userId = parseInt(this.$cookies.get("id"));

				// 切换默认地址状态，0表示默认地址，1表示非默认地址
				const newDefaultAddress = address.defaultAddress === 0 ? 1 : 0;

				updateAddress({
					userId: userId,
					addressId: address.addressId,
					defaultAddress: newDefaultAddress
				}).then(() => {
					uni.showToast({
						title: newDefaultAddress === 0 ? '已设为默认地址' : '已取消默认地址',
						icon: 'none'
					});
					this.getTAddresslist(); // 更新地址列表
				}).catch(() => {
					uni.showToast({
						title: '设置失败，请稍后重试',
						icon: 'none'
					});
				});
			}
		},
		onLoad() {
			this.getTAddresslist();
		}
	};
</script>



<style scoped>
	.address-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		background-color: #2ac2d2;
		padding: 15px;
		text-align: center;
		color: #fff;
	}

	.header-title {
		font-size: 18px;
		font-weight: bold;
	}

	.address-list {
		flex: 1;
		padding: 10px;
	}

	.address-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		margin-bottom: 10px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.address-info {
		flex: 1;
	}

	.name-phone {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.address-text {
		margin-top: 5px;
		color: #666;
		font-size: 14px;
	}

	.action-buttons {
		display: flex;
	}

	.edit-button,
	.delete-button {
		padding: 1px 6px;
		border-radius: 5px;
		font-size: 10px;
		margin-left: 5px;
	}

	.edit-button {
		background-color: #2ac2d2;
		color: #fff;
	}

	.delete-button {
		background-color: #ff4d4f;
		color: #fff;
	}

	.add-address {
		padding: 15px;
		text-align: center;
		background-color: #ffffff;
	}

	.add-button {
		width: 100%;
		padding: 10px 0;
		background-color: #2ac2d2;
		color: #fff;
		border-radius: 10px;
		font-size: 16px;
	}
</style>